<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位属性</title>
		<style>
			/* div宽高一致 300px*00px,圆，文本放大：10em,垂直居中
			 每个圆添加一个颜色
			 */
			span{
				bord er:1px solid red;
				width: 300px;
				height: 300px;
				border-radius: 50%;
				font-size: 10em;
				text-align: center;
				line-height:300px ;
				color: white;
			/* 网页阴影：①滤镜：下阴影 ②文本阴影 ③盒子阴影 */
			/* 属性值：X  Y  模糊半径 阴影半径 颜色 内外阴影 */
			box-shadow:5px 5px 50px 10px #6f6f6f inset;
			/* 浮动定位：fioat属性：none/left/right; */
			float:left;
			}
			span.d1{background-color: #aaffff;
			}
			span.d2{
				background-color: #aaaaff;
			}
		span.d3{
				background-color: #aaff7f;
				/* clear清除浮动:left/right/both;直接作用在浮动元素上 */
				clear:left;
			}
		span.d4{
				background-color: #ffaaff;
			}
		span.d5{
				background-color: #ffaa7f;
			}
		</style>
	</head>
	<body>
		<!-- 什么是定位？ 页面元素通过“定位方式”指定具体位置
		 定位方式5种：①普通流定位（文档流定位）：页面与元素分为：块，行，行内块，按照元素特点定位元素
		             ②浮动定位：页面上左右布局，可以让元素飘起来，飘起来的元素转成块元素
					 ③相对定位：相对于父级进行定位，没有父级，按照body定位
					            元素不脱离文档流
					 ④绝对定位：相对于父级元素进行定位u，没有父级，按照页面左顶角定位
					            元素脱离文档流
					 堆叠属性z-index属性：属性值  9999
					 ⑤固定定位：广告接口固定在页面的右下角，position:fiexd
		 -->
		<span class="d1">1</span>
		<span class="d2">2</span>
		<span class="d3">3</span>
		<span class="d4">4</span>
		<span class="d5">5</span>
	</body>
</html>